<template>
    <div class="index-wrap">
        <div class="index-left">
            <div class="index-left-block">
                <h2>全部产品</h2>
    
                <!-- 内置组件 -->
                <template v-for="product in productList">
                    <h3>{{product.title}}</h3>
                    <ul>
                        <li v-for="item in product.list">
                            <a :href="item.url">{{item.name}}</a>
                            <span v-if="item.hot" class="hot-Tag">HOT</span>
                        </li>
                    </ul>
                    <div v-if="!product.last" class="hr"></div>
                </template>
            </div>
            <div class="index-left-block lastest-game">
                <h2>最新消息</h2>
                <ul>
                    <li v-for="item in newsList">
                        <a target="_blank" :href="item.url">{{item.name}}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="index-right">
            <slide-show :slides="slides" :inv="slideSpeed" @onchange="doSomething"></slide-show>

            <div class="index-board">
                <div class="index-board-item" v-for="(item,index) in boardList">
                    <img :src="item.imgsrc" class="board-img">
                    <h2>{{item.title}}</h2>
                    <p>{{item.description}}</p>
                    <div class="index-board-button" :to="{path:'detail'}">立即购买</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import slideShow from '../components/slideShow'
export default {
    components: {
        slideShow
    },
    created: function () {
        // 全部产品
        this.$http.get('/api/productList').then((res) => {
            this.productList = res.data;
        }, (err) => {
            console.log(err);
        })

        // 最新消息
        this.$http.get('/api/getBoardList').then((res) => {
            this.newsList = res.data;
        }, (err) => {
            console.log(err);
        })
    },
    data() {
        return {
            slideSpeed: 2000,
            slides: [{
                src: require('../assets/slideShow/1.jpg'),
                title: 'xxx1',
                href: 'detail/analysis'
            }, {
                src: require('../assets/slideShow/2.jpg'),
                title: 'xxx2',
                href: 'detail/count'
            }, {
                src: require('../assets/slideShow/3.jpg'),
                title: 'xxx3',
                href: 'detail/publish'
            }, {
                src: require('../assets/slideShow/4.jpg'),
                title: 'xxx4',
                href: 'detail/forecast'
            }],
            boardList: [
                {
                    title: '开放产品',
                    description: '开放产品是一款开放产品',
                    id: 'car',
                    toKey: 'analysis',
                    saleout: false,
                    imgsrc: 'https://imgsa.baidu.com/news/q%3D100/sign=a285de08871001e9483c100f880f7b06/6d81800a19d8bc3eb07c912b888ba61ea9d345de.jpg'
                },
                {
                    title: '品牌营销',
                    description: '品牌营销帮助你的产品更好地找到定位',
                    id: 'earth',
                    toKey: 'count',
                    saleout: false,
                    imgsrc: 'https://ss1.baidu.com/73N1bjeh1BF3odCf/it/u=3519353170,2115024521&fm=202'
                },
                {
                    title: '使命必达',
                    description: '使命必达快速迭代永远保持最前端的速度',
                    id: 'loud',
                    toKey: 'forecast',
                    saleout: true,
                    imgsrc: 'https://ss0.bdstatic.com/6ONWsjip0QIZ8tyhnq/it/u=1015074315,803147582&fm=202&src=759'
                },
                {
                    title: '勇攀高峰',
                    description: '帮你勇闯高峰，到达事业的顶峰',
                    id: 'hill',
                    toKey: 'publish',
                    saleout: false,
                    imgsrc: 'https://ss2.baidu.com/73Z1bjeh1BF3odCf/it/u=2121276690,19371721&fm=202'
                }],

            newsList: [],

            productList: {}
        }
    },
    methods: {
        doSomething() {
            // console.log('run');
        }
    },
    mounted: function () {
    }
}
</script>

<style scoped>
.index-wrap {
    zoom: 1;

    width: 1200px;
    margin: auto;
    padding-top: 30px;
}

.index-wrap:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}

.index-wrap .index-left {
    float: left;
    width: 200px;
    margin-right: 20px;
}

.index-wrap .index-right {
    float: right;
    width: 980px
}

.index-left-block {
    background: #fff;
    margin-bottom: 10px;
}

.index-left-block h2 {
    background: #41b883;
    color: #fff;
    padding: 10px;
    font-size: 14px;
}

.index-left-block h3 {
    font-size: 12px;
    padding: 10px 10px;
}

.index-left-block ul {
    padding: 8px 0 5px;
    margin: 0 15px;
}

.index-left-block ul li {
    margin-bottom: 10px;
}

.index-left-block ul li a:hover {
    color: #41b883;
}

.index-left-block .hr {
    background: #eee;
    height: 1px;
    margin-bottom: 5px;
}

.index-board {
    zoom: 1;
    width: 1000px;
}

.index-board:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}

.index-board .index-board-item {
    width: 475px;
    margin-right: 20px;
    background: #fff;
    float: left;
    padding: 15px 0;
    margin-bottom: 20px;
    position: relative;
}

.index-board .index-board-item h2 {
    margin-left: 200px;
    margin-top: 10px;
    font-size: 15px;
}

.index-board .index-board-item p {
    margin: 10px 0;
    margin-left: 200px;
}

.index-board .index-board-item .index-board-button {
    margin-left: 200px;
    padding: 10px;
    width: 85px;
    background: #41b883;
    color: #fff;
    text-align: center;
}

.hot-Tag {
    background: red;
    color: #fff;
}

.board-img {
    width: 150px;
    height: 90px;
    position: absolute;
    left: 20px;
    top: 20px;
}
</style>
